<template>
  <div>

    <my-head title="发现" :go="null" :ri="false"></my-head> 

<div class="swiper"> </div>


<div class="mian">
 <router-link to="/invitation">
<div class="left">
<ul>
<li><img src="../../assets/img3_03.png" alt=""></li>
<li>邀请好友</li>
<li class="s">点击邀请好友赚佣金</li>
</ul>
</div>
 </router-link>
 <router-link to="/Membergrade">
<div class="right">
<ul>
<li><img src="../../assets/img4_05.png" alt=""></li>
<li>会员等级</li>
<li class="s">会员关怀 福利荟萃</li>
</ul>
</div>
 </router-link>
</div>

<div class="paiming">
<p>暂无佣金</p>
<p>暂无排名</p>
</div>
<div class="ss"></div>
<div class="p1">

<ul >
  <router-link to="/Sign">
  <li><img src="../../assets/img7_03.png" alt=""></li>
  <li>签到</li>
 </router-link>
</ul>

<ul  @click="jiedai()">
  <li><img src="../../assets/img6_03.png" alt=""></li>
  <li>我要借贷</li>
</ul>

<ul>
 <router-link to="/Help">
  <li><img src="../../assets/img5_03.png" alt=""></li>
  <li>帮助中心</li>
   </router-link>
</ul>


</div>

<div class="p2">
<ul>
 <router-link to="/member">
  <li><img src="../../assets/img9_03.png" alt=""></li>
  <li>会员中心</li>
     </router-link>
</ul>
<ul  @click="weixin()">
  <li><img src="../../assets/img9_05.png" alt=""></li>
  <li>关注微信</li>
</ul>
<ul>
  <li><img src="../../assets/img10_07.png" alt=""></li>
  <li>小何计算器</li>
</ul>


</div>

<div id="jiekuan"  @click="no()">
  <img src="@/assets/QQ图片20180201101336.png" alt="">
</div>

<div id="weixin"  @click="dd()">
  <img src="@/assets/weixin_03.png" alt="">
</div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
components:{
    myHead:Head
  },
  methods:{
    jiedai(){
      document.getElementById('jiekuan').style.display='block'
      
    },
     no(){
  document.getElementById('jiekuan').style.display="none"
    },
     weixin(){
      document.getElementById('weixin').style.display='block'
      
    },
        dd(){
  document.getElementById('weixin').style.display="none"
    },
  }
}
</script>

<style scoped lang="less">

#weixin{
  width: 100%;
  height: 100%;
  background: #b2b2b2;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
   background: rgba(0,0,0,0.5);
   img{
     width: 80%;
     position:absolute;
top: 25%;
left: 10%
   }
}

#jiekuan{
  width: 100%;
  height: 100%;
  background: #b2b2b2;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
   background: rgba(0,0,0,0.5);
   img{
     width: 60%;
     position:absolute;
top: 20%;
left: 20%
   }
}

a{
  color: #313131
}

.s {
  color: #868686;
}

.p1 img {
  width: .45rem;
}

.p2 img {
  width: .45rem;
}
.p1 {
  font-size: 0.08rem;
  display: flex;
  text-align: center;
}

.p1 ul li{
 margin-top: 0.1rem
}

.p2 ul li{
 margin-top: 0.1rem
}
.p2 {
  font-size: 0.08rem;
  display: flex;
  text-align: center;
}

.p1 ul {
  float: left;
  list-style: none;
  flex: 1;
  margin-top: .1rem;
}

.p2 ul {
  float: left;
  list-style: none;
  flex: 1;
  margin-top: .1rem;
}

.ss {
  width: 100%;
  height: .15rem;
  background: #f4f4f4;
}
  div{
    flex: 1;
  }

.swiper{
  width: 100%;
  height: 1.5rem;
  background: pink
}
.mian {
  width: 100%;
  height: .9rem;
  /* background: pink; */
  margin-top: .12rem;
  margin-bottom: .1rem;
  color: #313131;
}


.mian .left {
  width: 50%;
  border-right: 1px solid #e9e9e9;
  font-size: 0.08rem;
  text-align: center;
  float: left;
}

.mian .right {
  width: 50%;
  float: left;
  font-size: 0.08rem;
  text-align: center;
}

.mian .right ul {
  list-style: none;
}

.mian .right ul li{
margin-top: .05rem
}
.mian .left ul li{
margin-top: .05rem
}
.left img {
  width: .5rem;
}

.right img {
  width: .5rem;
}

.paiming {
  width: 100%;
  height: .5rem;
  /* background: pink; */
  border-top: 1px solid #e9e9e9;
  display: flex;
  color: #313131;
  font-size: .15rem;
  text-align: center;

}
.paiming p {
  flex: 1;

  line-height: .5rem;
}
img{
  display: inline
}
</style>
